<template>
  <div class="login_container">
    <el-row>
      <!-- xs是当屏幕宽度小于768px时，占据的列数 -->
      <el-col :span="12" :xs="0"></el-col> <!--占位用的-->
      <el-col :span="12" :xs="24">
        <el-form class="login_form">
          <h1>Hello</h1>
          <h2>欢迎来到昆仑甄选</h2>
          <el-form-item>
            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue';
//手机账号与密码的数据
import { reactive ,ref} from 'vue';
//引入用户相关的小仓库
import useUserStore from '@/store/modules/user';
//引入路由
import { useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
//使用路由
let $router = useRouter();
//定义变量控制按钮加载效果
let loading = ref(false);

let userStore = useUserStore();

let loginForm = reactive({ username: 'admin', password: '111111' });
//登录按钮回调
const login = async () => {
  //加载效果：开始加载
  loading.value = true;
  console.log(loginForm);
  //点击登录按钮以后干什么
  //通知仓库发登录请求
  try {
    //保证登录成功 
    await userStore.userLogin(loginForm); 
    //编程式导航跳转
    $router.push('/');
    //登录成功提示信息
    ElNotification({ title: '登录成功', type: 'success' ,message: '登录成功' });
    loading.value = false; //结束加载

  } catch (error) { 
    ElNotification({ title: '登录失败', type: 'error' ,message: '用户名或密码错误' });
    loading.value = false; //结束加载

  }
   
  //请求成功->首页展示数据的地方
  //请求失败->提示错误信息
}
</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
}

.login_form {
  width: 80%;
  top: 30vh;
  position: relative;
  background: url("@/assets/images/login_form.png") no-repeat;
  background-size: cover;
  padding: 40px;
}

.login_btn {
  width: 100%;
}

h1 {
  color: white;
  font-size: 40px;
}

h2 {
  color: white;
  font-size: 20px;
  margin: 20px 0;
}
</style>
